<template>
  <div class="common-layout">
    <el-container>
      <el-main
        ><div class="tags-panel">
              <div class="demo-collapse">
                <el-collapse v-model="activeNames" accordion>
                  <el-collapse-item title="类型：" name="1" >
                    <el-radio-group size="large"
                      v-for="item in items"
                      :key="item.label"
                      v-model="checkedlabel"
                      @change="tagclick(item)">
                       <el-radio-button :label="item.label" style="padding: 8px"/>
                    </el-radio-group>
                  </el-collapse-item>
                  <el-collapse-item title="区域：" name="2" >
                    <el-radio-group size="large"
                      v-for="item in items1"
                      :key="item.label"
                      v-model="checkedlabel"
                      @change="tagclick(item)">
                       <el-radio-button :label="item.label" style="padding: 8px"/>
                    </el-radio-group>
                  </el-collapse-item>
                </el-collapse>
              </div>
        </div></el-main
      >
      <el-container
        ><el-main class="content">
          <el-row>
            <el-col
              v-for="(o, index) in pageData.movielist.slice((pageData.current-1)*pageData.pagesize,pageData.current*pageData.pagesize)"
              :key="o"
              :span="4"
              :offset="index > 0 ? 2 : 0"
            >
             <div class="cards">
                <el-card :body-style="{ padding: '0px' }" shadow="hover" @click="cardclick(o.mid)">
                <img
                  :src="o.img_url"
                  class="image"
                />
                <div style="padding: 14px">
                  <span class="title">{{o.chinese_name}}</span>
                  <div class="bottom">
                    <span class="grade">{{o.rating}}</span>
                    <el-button text class="button">购票</el-button>
                  </div>
                </div>
              </el-card>
             </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
   <!--分页 -->
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,next,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>
<script lang="ts">
import { reactive, ref,onMounted, watch,watchEffect, computed ,getCurrentInstance } from "vue";
import type { TagProps } from "element-plus";
import { SearchMovieAPI, postSelectMovieAPI, postTopMovie,} from "../../api/userinfo";
import { ElMessage, UploadProps } from "element-plus";
import { useRouter ,useRoute, onBeforeRouteUpdate, LocationQueryValue} from 'vue-router';
import {mapState, useStore} from"vuex";
export default {

  setup() {
      onMounted(()=>{
      handleRefs();
    })
    computed
    //组件通信
    const instance = getCurrentInstance();
    instance?.proxy?.$Bus.on('on-EmitA', (o:any)=>{
      seachpush(o.msg);
    })//监听一个
    const arr = ref([]);//声明一个新数组
    const loading = ref(true)
    const router=useRoute();
    const store=useStore()
    const routers=useRouter();
    type Item = { type: TagProps["type"]; label: string;}
    const activeNames = ref("1");
    const items = ref<Array<Item>>([
      { type: "info", label: "全部" },
      { type: "info", label: "爱情" },
      { type: "info", label: "喜剧" },
      { type: "info", label: "动画" },
      { type: "info", label: "剧情" },
      { type: "info", label: "恐怖" },
      { type: "info", label: "惊悚" },
      { type: "info", label: "科幻" },
      { type: "info", label: "动作" },
      { type: "info", label: "悬疑" },
      { type: "info", label: "犯罪" },
      { type: "info", label: "冒险" },
      { type: "info", label: "战争" },
      { type: "info", label: "奇幻" },
      { type: "info", label: "运动" },
      { type: "info", label: "家庭" },
      { type: "info", label: "古装" },
      { type: "info", label: "武侠" },
      { type: "info", label: "西部" },
      { type: "info", label: "历史" },
      { type: "info", label: "传记" },
      { type: "info", label: "歌舞" },
      { type: "info", label: "短片" },
      { type: "info", label: "戏曲" },
      { type: "info", label: "音乐" },
      { type: "info", label: "灾难" },
      { type: "info", label: "青春" },
      { type: "info", label: "儿童" },
      { type: "info", label: "纪录片" },
      { type: "info", label: "黑色电影" },
    ]);
    const items1 = ref<Array<Item>>([
      { type: "info", label: "全部" },
      { type: "info", label: "大陆" },
      { type: "info", label: "美国" },
      { type: "info", label: "韩国" },
      { type: "info", label: "日本" },
      { type: "info", label: "香港" },
      { type: "info", label: "台湾" },
      { type: "info", label: "泰国" },
      { type: "info", label: "印度" },
      { type: "info", label: "法国" },
      { type: "info", label: "德国" },
      { type: "info", label: "波兰" },
      { type: "info", label: "伊朗" },
      { type: "info", label: "俄罗斯" },
      { type: "info", label: "意大利" },
      { type: "info", label: "西班牙" },
      { type: "info", label: "澳大利亚" },

    ]);
   const checkedlabel=ref()
   const tagclick = (tag: any) => {
      seachpush(tag.label)
    };
    const currentDate = ref(new Date()); 
    const cardclick=(id:any)=>{
      routers.push({ path: "/info" });
      store.dispatch("SET_MOVIEINFO", id);
      store.dispatch("SET_DISCUSSINFO",id);
      store.dispatch("SET_PICTUREINFO",id);
    };
    const pageData=reactive({
       current:1,//当前页
       pagesize:18,// 当前页显示多少条
       movielist:ref([]),
       total:0  //总数据
     })
     pageData.movielist=computed({
        get:()=>{
          return temp.value
        },
        set:(newValue)=>{
        temp.value=newValue
        }
      })as never
     /**从主页搜索时 */
     const temp=ref([])
     const seachpush=(search:any)=>{
      if(search!=="全部"){
         temp.value=arr.value.filter((item:any) => item.chinese_name.indexOf(search) !== -1 ||item.type.indexOf(search)!==-1||item.country.indexOf(search)!==-1)
        if(temp.value.length!=0){
          pageData.movielist=temp.value
        }
        else{
          ElMessage.warning("影片资源暂无换个关键词试试吧~")
        }
      }
      else{
        pageData.movielist=arr.value
      }
    }
    /**界面加载 */
    const handleRefs = async () => {
          arr.value=store.state.movie.movieList
          temp.value=arr.value
          pageData.total=store.state.movie.movieList.length;
      };

    const handleSizeChange=(value:any)=>{
      pageData.pagesize=value;
      pageData.movielist=[];
      handleRefs();
    }   
    const handleCurrentChange=(value:any)=>{
      pageData.current=value;
      pageData.movielist=[];
      handleRefs();
    }
    return {
      loading,
      items,
      items1,
      activeNames,
      tagclick,
      currentDate,
      cardclick,
      handleRefs,
      pageData,
      handleSizeChange,
      handleCurrentChange,
      // checked,
      onchange,
      checkedlabel
    };
  },
};
</script>
<style scoped>
@import "../../assets/css/reset.css";
.tags-panel {
  border: 1px solid #e5e5e5;
  padding: 0 20px;
  margin: 10px 100px;
}
.content {
  padding: 0 20px;
  margin: 10px 100px;
}
.tags-lines {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.el-collapse-item__content {
  margin: 5px 10px;
  padding: 10px;
}
.mx-1{
  padding: 5px 20px;
  margin: 10px;
}
.mx-1:active{
  border-color: #ffb400;
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 2px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 13px;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
  transform: scale(1);
  transition: transform 1s ease 0s;
}
.image:hover{
  transform: scale(1.3);
}
.el-card__body{
  margin: 15px;
}
.title{
  font-size: 15px;
  white-space: nowrap;  /*强制span不换行*/
  display: inline-block;  /*将span当做块级元素对待*/
  width: 90%;
  overflow: hidden;  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;  /*超出部分以点号代替*/
}
.grade{
  font-size: 20px;
  color: #ffb400;
}
.cards{
  margin: 20px 20px 0 0;
  overflow: hidden; 
}
.el-pagination{
  padding: 50px 10px;
  margin-left: 43rem;
}
</style>
